import React from 'react';
import { Modal, Tabs, Input } from 'antd';
import { ModalProps } from 'antd/lib/modal';
import TreeData, { IRourseceItem, IProp as TreeProp } from "./index"

const { TabPane } = Tabs;

type Key = number | string
type assetSelectType = 'onlytree' | 'inputandtree'
interface Iprops extends Omit<TreeProp, "dataLoading">, Omit<ModalProps, "onOk"> {
    onSubmit?: (list: IRourseceItem[], keyList: Key[], inputValue?: string) => void,
    value?: string,
    type?: assetSelectType
}

const AssetTreeSelectModal: React.FC<Iprops> = (props) => {
    const { checkedKeyList, ...restProps } = props;
    const treeType = props.type ?? 'onlytree';
    const [inputVal, setInputVal] = React.useState<string>("")
    const [cacheChooseList, setCacheChooseList] = React.useState<IRourseceItem[]>([])
    const [cacheChooseKeyList, setcacheChooseKeyList] = React.useState<Key[]>([])
    const [tree, setTree] = React.useState<IRourseceItem[]>([])
    const [hasInitTree, setHasInitTree] = React.useState<boolean>(false)
    const [tabKey, setTabKey] = React.useState<string | number>(1)

    const treeRef = React.useRef();
    React.useEffect(() => {
        setInputVal(props.value ?? "")
    }, [props.value])

    React.useEffect(() => {
        if (!props.visible) {
            setTabKey(1)
            setCacheChooseList([])
            setcacheChooseKeyList([])
            setInputVal("")
            treeRef.current?.clearRowKeys()
            treeRef.current?.clearSearchTxt()
        } else {
            if (props.value === '' && props.checkedKeyList && props.checkedKeyList.length > 0) {
                setTabKey(2)
            } else {
                setTabKey(1)
            }
        }

    }, [props.visible])

    function handeleassetSelectOk() {
        if (props.onSubmit && typeof props.onSubmit === 'function') {
            if (treeType === 'onlytree') {
                props.onSubmit(cacheChooseList, cacheChooseKeyList)
            } else if (treeType === 'inputandtree') {
                if (+tabKey === 1) {
                    props.onSubmit(cacheChooseList, cacheChooseKeyList, inputVal)
                } else {
                    props.onSubmit(cacheChooseList, cacheChooseKeyList)
                }
            }
        }
    }

    function initCacheChooseList() {

    }

    React.useEffect(() => {
        initCacheChooseList()
    }, [tree])

    function handelSelect(list: IRourseceItem[], keyList: Key[]) {
        setCacheChooseList(list)
        setcacheChooseKeyList(keyList)
    }

    function handeInitFetch(tree: IRourseceItem[]) {
        setTree(tree)
        setHasInitTree(true)
    }

    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {
        const { value } = e.target;
        setInputVal(value)
    }

    function tabChange(i: string | number) {
        setTabKey(i)
    }

    return (
        <Modal
            width={920}
            title="材料选择"
            visible={props.visible}
            {...restProps}
            onOk={() => handeleassetSelectOk()}
            zIndex={10000000}
        >
            {
                treeType === 'onlytree' ?
                    <TreeData ref={treeRef} dataLoading={hasInitTree} checkedKeyList={checkedKeyList} {...restProps} onSelect={handelSelect} initFetch={(tree) => handeInitFetch(tree)} />
                    :
                    <Tabs defaultActiveKey="1" onChange={tabChange}>
                        <TabPane tab="自定义输入" key="1">
                            <div style={{
                                textAlign: "left"
                            }}>
                                <Input size="large" style={{ width: 520 }} placeholder="输入自定义名称" value={inputVal} onChange={handleInput} />
                            </div>
                        </TabPane>
                        <TabPane tab="列表选择" key="2">
                            <TreeData ref={treeRef} dataLoading={hasInitTree} checkedKeyList={checkedKeyList} {...restProps} onSelect={handelSelect} initFetch={(tree) => handeInitFetch(tree)} />
                        </TabPane>
                    </Tabs>
            }


        </Modal>
    );
}

export default AssetTreeSelectModal;